<template>
  <div class='container'>
    <el-dialog :title="showTitle" :visible="showAddDialog" @close="closeDialogFn" :close-on-click-modal="false">
      <el-form ref="addform" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="文章标题:" prop="title">
          <el-input placeholder="请输入文章标题" v-model="form.title" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item label="文章内容:" prop="articleBody">
          <!-- <el-input v-model="form.articleBody" style="width:80%"></el-input> -->
          <!-- 改造: 富文本编辑器： -->
          <quill-editor class="quill" v-model="form.articleBody" style="width:100%;" :options="editorOption" @blur="quillblur" ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址:" prop="videoURL">
          <el-input placeholder="请输入视频地址" v-model="form.videoURL" style="width:100%"></el-input>
        </el-form-item>
        <el-form-item style="text-align:right">
          <el-button @click="closeDialogFn" >取消</el-button>
          <el-button type="primary" @click="confirm">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 富文本编辑器引入文件
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
import { add, detail, update } from '@/api/hmmm/articles'
export default {
  name: 'addArticle',
  props: {
    showAddDialog: {
      type: Boolean,
      default: false
    },
    rowList: { // 点击的这条数据
      type: Object,
      // 复杂类型设置默认值 需要使用函数的方式
      default: () => {}
    }
  },
  computed: {
    showTitle () {
      return this.rowList.id ? '编辑文章' : '新增文章'
    }
  },
  components: {
    quillEditor
  },
  data () {
    return {
      form: {
        title: '',
        articleBody: '',
        videoURL: ''
      },
      rules: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        articleBody: [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            [{ align: [] }], // 对齐方式
            ['clean'], // 清除文本格式
            ['image', 'video'] // 链接、图片、视频
          ]
        },
        placeholder: ''
      }
    }
  },
  methods: {
    closeDialogFn () {
      this.$emit('update:showAddDialog', false)
      this.$refs.addform.resetFields()// 清空校验痕迹
      this.form = { // 清空残留数据
        title: '',
        articleBody: '',
        videoURL: ''
      }
    },
    // 富文本失去焦点,validateField 部分校验
    quillblur () {
      this.$refs.addform.validateField('articleBody')
    },
    // 点击确定
    confirm () {
      this.$refs.addform.validate(async flag => {
        if (!flag) return
        if (this.form.id) {
          // 有id，编辑业务
          await update(this.form)
          this.$message.success('编辑成功')
        } else {
          // 无id，新增业务
          await add(this.form)
          this.$message.success('添加成功')
        }
        this.closeDialogFn()
        this.$parent.getArticlesList()
      })
    },
    // 获取文章详情
    async getArticleDetail (id) {
      const { data } = await detail({ id })
      this.form = data // 数据回填
    }
  }
}
</script>

<style scoped lang='scss'>
.el-form {
  ::v-deep {
    .ql-toolbar .ql-snow {
      padding: 0 8px;
    }
    .ql-editor {
      height: 200px;
    }
  }
}
</style>
